/*
  学习目标：兄弟组件通信-状态提升
  状态提升:  将需要共享的数据, 提升共同的父组件中

*/
import React, { Component } from 'react';
import Husband from './components/Husband';
import Wife from './components/Wife';

export default class App extends Component {
  // 1. 把状态提升到父组件App中
  state = {
    money: 0,
  };

  /* 2. 把赚钱方法提升到父组件App中 */
  handleMakeMoney = () => {
    this.setState({ money: this.state.money + 1000 });
  };

  // 5. 父组件内, 定义花钱的函数
  handleCostMoney = (num) => {
    // 8. 完成花钱的更新计算
    this.setState({ money: this.state.money - num });
  };

  render() {
    return (
      <div>
        <h1 style={{ textAlign: 'center' }}>家庭存款：{this.state.money}</h1>
        <Husband
          // 3.父传子回调函数(赚钱的回调函数)
          handleMakeMoney={this.handleMakeMoney}
        />
        <hr />
        <Wife
          // 6. 通过props, 传递花钱的回调函数
          handleCostMoney={this.handleCostMoney}
        />
      </div>
    );
  }
}
